<template>
  <div class="reject-form-table">
    <p class="form-title row">
      表单字段
      <el-button type="primary" @click="add">新增</el-button>
    </p>
    <el-table :data="rejectForms" height="250" style="width: 100%" border>
      <el-table-column prop="field" label="字段">
        <template v-slot="scope">
          <el-input
            class="value"
            :model-value="scope.row.field"
            @input="change('field', $event, scope.$index)"
            placeholder="请输入"
          />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称">
        <template v-slot="scope">
          <el-input
            class="value"
            :model-value="scope.row.name"
            @input="change('name', $event, scope.$index)"
            placeholder="请输入"
          />
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型">
        <template v-slot="scope">
          <el-select
            class="value"
            :model-value="scope.row.type"
            @change="change('type', $event, scope.$index)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in typeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="操作">
        <template v-slot="scope">
          <div style="display: flex">
            <el-button
              v-if="scope.row.type === 2"
              type="primary"
              @click="setOption(scope.row, scope.$index)"
              text
            >
              配置
            </el-button>
            <el-popconfirm
              width="220"
              confirm-button-text="确认"
              cancel-button-text="取消"
              title="确定删除吗？"
              @confirm="remove(scope.$index)"
            >
              <template #reference>
                <el-button type="danger" text>
                  <i class="icon iconfont" style="cursor: pointer">&#xe718;</i>
                </el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <SelectOptionDialog
      v-model="dialogVisible"
      ref="selectOptionRef"
      @update:options="updateOptions"
    />
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
const emits = defineEmits(['update'])
interface FormItem {
  field: string
  name: string
  type: number
  options: any[]
}
const rejectForms = ref<FormItem[]>([])
const typeArr = ref<
  {
    label: string
    value: number
  }[]
>([
  {
    label: '文本',
    value: 1
  },
  {
    label: '选项',
    value: 2
  }
])
const dialogVisible = ref(false)
const selectOptionRef = ref<any>()
// 新增
const add = () => {
  rejectForms.value.push({
    field: '',
    name: '',
    type: 2,
    options: []
  })
}
// 删除
const remove = (index: number) => {
  rejectForms.value = rejectForms.value.filter((el, i) => {
    return index != i
  })
  ElMessage.error('删除成功!')
}
// 校验
const verify = (index: number) => {
  const obj = rejectForms.value[index]
  const repeat = rejectForms.value
    .filter((el, i) => i != index)
    .find((el) => el.field === obj.field)
  if (repeat) {
    ElMessage.error('输入字段重复')
    return false
  } else {
    return true
  }
}
// 改变
const change = (key: string, value: string, index: number) => {
  if (!verify(index)) return
  rejectForms.value = rejectForms.value.map((el: FormItem, i) => {
    if (i === index) {
      el[key] = value
    }
    return el
  })
  emits('update', rejectForms.value)
}
const updateOptions = (data: { key: string; value: string; index: number }) => {
  change(data.key, data.value, data.index)
}
// 配置选项列表
const setOption = (row: FormItem, index: number) => {
  dialogVisible.value = true
  selectOptionRef.value.setOptions(row, index)
}
defineExpose({
  setRejectForm: (data: FormItem[]) => {
    try {
      rejectForms.value = JSON.parse(JSON.stringify(data))
    } catch (error) {
      console.log(error)
    }
    console.log(rejectForms.value)
  },
  getRejectForm: () => {
    return rejectForms.value
  }
})
</script>
